@using jiuyuan.服务
@using jiuyuan.数据.基础数据类
@using jiuyuan.管理器
@using jiuyuan.数据.玩家类

<div class="admin-container">
    <div class="admin-header">
        <h3>装备管理</h3>
        <button class="btn-primary" @onclick="添加新装备">添加新装备</button>
    </div>

    <div class="admin-content">
        @if (!数据已加载)
        {
            <div class="loading">正在加载数据...</div>
        }
        else
        {
            <div class="item-list">
                @foreach (var 装备 in 显示装备列表)
                {
                    <div class="item-card">
                        <div class="item-info">
                            <h4>@装备.名称</h4>
                            <p>等级要求: @装备.等级要求</p>
                            <p>槽位: @GetSlotName((int)装备.槽位)</p>
                            <p>耐久度: @装备.耐久度/@装备.最大耐久度</p>
                        </div>
                        <div class="item-actions">
                            <button class="action-button view-button" @onclick='() => 查看装备详情(装备)'>查看</button>
                            <button class="action-button edit-button" @onclick='() => 编辑装备(装备)'>编辑</button>
                            <button class="action-button delete-button" @onclick='() => 删除装备(装备.Id)'>删除</button>
                        </div>
                    </div>
                }
            </div>
        }
    </div>
</div>

<!-- 装备详情弹窗 -->
<div class="modal" style="display: @(显示详情弹窗 ? "block" : "none");">
    <div class="modal-content">
        <div class="modal-header">
            <h3>装备详情</h3>
            <button class="close-button" @onclick="关闭详情弹窗">&times;</button>
        </div>
        <div class="modal-body">
            @if (选中的装备 != null)
            {
                <div class="detail-grid">
                    <div class="detail-item">
                        <label>装备名称:</label>
                        <span>@选中的装备.名称</span>
                    </div>
                    <div class="detail-item">
                        <label>等级要求:</label>
                        <span>@选中的装备.等级要求</span>
                    </div>
                    <div class="detail-item">
                        <label>槽位:</label>
                        <span>@GetSlotName((int)选中的装备.槽位)</span>
                    </div>
                    <div class="detail-item">
                        <label>耐久度:</label>
                        <span>@选中的装备.耐久度/@选中的装备.最大耐久度</span>
                    </div>
                    <div class="detail-item">
                        <label>图标:</label>
                        <span>@选中的装备.图标</span>
                    </div>
                    <div class="detail-item full-width">
                        <label>描述:</label>
                        <span>@选中的装备.描述</span>
                    </div>
                    <div class="detail-item">
                        <label>创建时间:</label>
                        <span>@选中的装备.创建时间.ToString("yyyy-MM-dd HH:mm")</span>
                    </div>
                    <div class="detail-item">
                        <label>更新时间:</label>
                        <span>@选中的装备.更新时间.ToString("yyyy-MM-dd HH:mm")</span>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

<!-- 编辑装备弹窗 -->
<div class="modal" style="display: @(显示编辑弹窗 ? "block" : "none");">
    <div class="modal-content">
        <div class="modal-header">
            <h3>@(IsEditing ? "编辑装备" : "添加新装备")</h3>
            <button class="close-button" @onclick="关闭编辑弹窗">&times;</button>
        </div>
        <div class="modal-body">
            @if (当前装备 != null)
            {
                <div class="form-grid">
                    <div class="form-group">
                        <label for="equipName">装备名称:</label>
                        <input type="text" id="equipName" @bind="当前装备.名称" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="equipLevel">等级要求:</label>
                        <input type="number" id="equipLevel" @bind="当前装备.等级要求" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="equipSlot">装备槽位:</label>
                        <select id="equipSlot" @bind="当前装备.槽位" class="form-control">
                            <option value="武器">武器</option>
                            <option value="头盔">头盔</option>
                            <option value="胸甲">胸甲</option>
                            <option value="护腿">护腿</option>
                            <option value="靴子">靴子</option>
                            <option value="饰品">饰品</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="equipDurability">当前耐久度:</label>
                        <input type="number" id="equipDurability" @bind="当前装备.耐久度" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="equipMaxDurability">最大耐久度:</label>
                        <input type="number" id="equipMaxDurability" @bind="当前装备.最大耐久度" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="equipIcon">图标:</label>
                        <input type="text" id="equipIcon" @bind="当前装备.图标" class="form-control" />
                    </div>
                    <div class="form-group full-width">
                        <label for="equipDescription">描述:</label>
                        <textarea id="equipDescription" @bind="当前装备.描述" class="form-control" rows="3"></textarea>
                    </div>
                </div>
                <div class="btn-group">
                    <button class="btn-primary" @onclick="保存装备">@(!IsEditing ? "添加" : "更新")</button>
                    <button class="btn-secondary" @onclick="关闭编辑弹窗">取消</button>
                </div>
            }
        </div>
    </div>
</div>

<style>
    .admin-container {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .admin-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid #4a2c8d;
    }

    .admin-content {
        flex: 1;
        overflow-y: auto;
    }

    .item-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }

    .item-card {
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 8px;
        padding: 20px;
        transition: all 0.3s ease;
    }

    .item-card:hover {
        background-color: rgba(40, 40, 80, 0.9);
        border-color: #6a0dad;
        box-shadow: 0 0 15px rgba(106, 13, 173, 0.5);
    }

    .item-info h4 {
        color: #b19cd9;
        margin-bottom: 10px;
        font-size: 1.2rem;
    }

    .item-info p {
        color: #a0a0e0;
        margin: 5px 0;
        font-size: 0.9rem;
    }

    .item-actions {
        display: flex;
        gap: 10px;
        margin-top: 15px;
        justify-content: flex-end;
    }

    .action-button {
        padding: 8px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.9rem;
    }

    .view-button {
        background-color: rgba(30, 60, 120, 0.8);
        color: #a0c0ff;
    }

    .view-button:hover {
        background-color: rgba(40, 80, 160, 0.9);
        box-shadow: 0 0 10px rgba(64, 128, 255, 0.5);
    }

    .edit-button {
        background-color: rgba(60, 120, 60, 0.8);
        color: #a0ffa0;
    }

    .edit-button:hover {
        background-color: rgba(80, 160, 80, 0.9);
        box-shadow: 0 0 10px rgba(128, 255, 128, 0.5);
    }

    .delete-button {
        background-color: rgba(120, 60, 60, 0.8);
        color: #ffa0a0;
    }

    .delete-button:hover {
        background-color: rgba(160, 80, 80, 0.9);
        box-shadow: 0 0 10px rgba(255, 128, 128, 0.5);
    }

    .small {
        padding: 5px 10px;
        font-size: 0.8rem;
    }

    .btn-primary {
        padding: 10px 20px;
        background: linear-gradient(to right, #4a2c8d, #6a0dad);
        border: none;
        border-radius: 5px;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1rem;
    }

    .btn-primary:hover {
        background: linear-gradient(to right, #5a3c9d, #7a1ddd);
        box-shadow: 0 0 15px rgba(106, 13, 173, 0.7);
    }

    .btn-secondary {
        padding: 10px 20px;
        background: linear-gradient(to right, #3a3a5a, #5a5a7a);
        border: none;
        border-radius: 5px;
        color: #e0e0ff;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1rem;
    }

    .btn-secondary:hover {
        background: linear-gradient(to right, #4a4a6a, #6a6a8a);
        box-shadow: 0 0 15px rgba(90, 90, 122, 0.7);
    }

    .btn-group {
        display: flex;
        gap: 15px;
        margin-top: 20px;
        justify-content: flex-end;
    }

    .loading {
        text-align: center;
        padding: 30px;
        color: #a0a0e0;
        font-size: 1.2rem;
    }

    /* 弹窗样式 */
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal-content {
        background-color: rgba(20, 20, 40, 0.95);
        border: 2px solid #4a2c8d;
        border-radius: 10px;
        width: 90%;
        max-width: 800px;
        max-height: 90%;
        overflow-y: auto;
        box-shadow: 0 0 30px rgba(106, 13, 173, 0.8);
    }

    .modal-content.large {
        max-width: 1000px;
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #4a2c8d;
    }

    .modal-header h3 {
        color: #b19cd9;
        margin: 0;
    }

    .close-button {
        background: none;
        border: none;
        color: #b19cd9;
        font-size: 1.8rem;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .close-button:hover {
        color: #ff5555;
    }

    .modal-body {
        padding: 20px;
    }

    /* 表单样式 */
    .form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
        margin-bottom: 20px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group.full-width {
        grid-column: 1 / -1;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
        color: #a0a0e0;
        font-weight: 500;
    }

    .form-control {
        width: 100%;
        padding: 10px;
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        color: #e0e0ff;
        font-size: 1rem;
    }

    .form-control:focus {
        outline: none;
        border-color: #6a0dad;
        box-shadow: 0 0 10px rgba(106, 13, 173, 0.5);
    }

    textarea.form-control {
        resize: vertical;
        min-height: 80px;
    }

    select.form-control {
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 15px;
    }

    /* 详情样式 */
    .detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }

    .detail-item {
        margin-bottom: 15px;
    }

    .detail-item.full-width {
        grid-column: 1 / -1;
    }

    .detail-item label {
        display: block;
        color: #a0a0e0;
        font-weight: 500;
        margin-bottom: 5px;
    }

    .detail-item span {
        display: block;
        color: #e0e0ff;
        padding: 8px;
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 5px;
    }

    /* 无数据提示 */
    .no-data {
        text-align: center;
        padding: 20px;
        color: #a0a0e0;
        font-style: italic;
    }
</style>

@code {
    // 注入服务
    [Inject] public 配置加载器 配置加载器 { get; set; } = default!;
    [Inject] public ILogger<装备管理> Logger { get; set; } = default!;

    // 实际的装备数据列表（从数据库获取）
    private List<装备物品> 装备列表 = new List<装备物品>();
    
    // 用于显示的装备列表（直接使用实际装备数据）
    private List<装备物品> 显示装备列表 = new List<装备物品>();
    
    private bool 数据已加载 = false;

    private 装备物品 当前装备 = new 装备物品();
    private 装备物品 选中的装备 = new 装备物品();
    private bool IsEditing = false;
    private Guid 编辑中的装备Id = Guid.Empty;
    private bool 显示详情弹窗 = false;
    private bool 显示编辑弹窗 = false;

    // 页面初始化时加载数据
    protected override async Task OnInitializedAsync()
    {
        await 加载装备数据();
    }

    // 从数据库加载装备数据
    private async Task 加载装备数据()
    {
        try
        {
            装备列表 = await 配置加载器.获取所有装备();
            显示装备列表 = 装备列表;
            
            数据已加载 = true;
            StateHasChanged();
        }
        catch (Exception ex)
        {
            Logger.LogError(ex, "加载装备数据时发生错误");
        }
    }

    private string GetSlotName(int 槽位)
    {
        return 槽位 switch
        {
            0 => "武器",
            1 => "头盔",
            2 => "胸甲",
            3 => "护腿",
            4 => "靴子",
            5 => "饰品",
            _ => "未知"
        };
    }

    private void 查看装备详情(装备物品 装备)
    {
        选中的装备 = 装备;
        显示详情弹窗 = true;
    }

    private void 关闭详情弹窗()
    {
        显示详情弹窗 = false;
    }

    private void 添加新装备()
    {
        当前装备 = new 装备物品();
        IsEditing = false;
        编辑中的装备Id = Guid.Empty;
        显示编辑弹窗 = true;
    }

    private void 编辑装备(装备物品 装备)
    {
        当前装备 = new 装备物品
        {
            Id = 装备.Id,
            名称 = 装备.名称,
            描述 = 装备.描述,
            等级要求 = 装备.等级要求,
            图标 = 装备.图标,
            创建时间 = 装备.创建时间,
            更新时间 = 装备.更新时间,
            槽位 = 装备.槽位,
            耐久度 = 装备.耐久度,
            最大耐久度 = 装备.最大耐久度,
            特效列表 = new List<装备特效>(装备.特效列表)
        };
        IsEditing = true;
        编辑中的装备Id = 装备.Id;
        显示编辑弹窗 = true;
    }

    private void 关闭编辑弹窗()
    {
        显示编辑弹窗 = false;
    }

    private async Task 删除装备(Guid 装备Id)
    {
        var 装备 = 显示装备列表.FirstOrDefault(e => e.Id == 装备Id);
        if (装备 != null)
        {
            显示装备列表.Remove(装备);
            装备列表.Remove(装备);
            
            // 从数据库中删除装备
            // 注意：这里应该调用配置加载器的删除方法，但目前没有实现
            // 作为临时解决方案，我们重新加载数据
            await 加载装备数据();
        }
    }

    private async Task 保存装备()
    {
        if (string.IsNullOrWhiteSpace(当前装备.名称))
            return;

        try
        {
            // 保存到数据库
            await 配置加载器.保存装备配置(当前装备);
            
            // 更新显示列表
            if (!IsEditing)
            {
                // 添加新装备
                显示装备列表.Add(当前装备);
                装备列表.Add(当前装备);
            }
            else
            {
                // 更新现有装备
                var existingEquip = 显示装备列表.FirstOrDefault(e => e.Id == 编辑中的装备Id);
                if (existingEquip != null)
                {
                    var index = 显示装备列表.IndexOf(existingEquip);
                    显示装备列表[index] = 当前装备;
                    
                    var originalIndex = 装备列表.IndexOf(existingEquip);
                    装备列表[originalIndex] = 当前装备;
                }
            }

            // 关闭弹窗
            显示编辑弹窗 = false;
            
            // 重新加载数据以确保一致性
            await 加载装备数据();
        }
        catch (Exception ex)
        {
            Logger.LogError(ex, "保存装备时发生错误");
        }
    }
}